<style lang = "scss" scoped>
#cmain {
    .cmain-content {
        width: 100%;
        height: 100%;
        min-height: 300px;
        background-color: #fff;
        padding: 10px 30px 30px 30px;
        font-family: Roboto;
        box-shadow: 0 0 10px 0 #cfcfcf;
        border-radius: 10px;
        position: relative;
    }
    .title {
        text-align: center;
        font-size: 22px;
    }
    .btnNormal {
        float: right;
        button+button {
            margin-left: 10px;
        }
        .download {
            padding: 2px 25px;
            border-radius: 20px;
            margin-left: 10px;
            background-color: #4578ad;
            border-color: #4578ad;
            color: #fff;
            display: inline-block;
            margin-bottom: 0;
            font-weight: normal;
            text-align: center;
            vertical-align: middle;
            touch-action: manipulation;
            cursor: pointer;
            background-image: none;
            border: 1px solid transparent;
            white-space: nowrap;
            line-height: 1.5;
            user-select: none;
            font-size: 14px;
            transition: color 0.2s linear, background-color 0.2s linear, border 0.2s linear, box-shadow 0.2s linear;
            &:hover {
                background-color: #6a93bd;
                border-color: #6a93bd;
            }
        }
        button {
            padding: 2px 25px;
            border-radius: 20px;
        }
    }
    .header {
        h2 {
            margin-top: 10px;
            background: #bdd6ee;
            padding-left: 7px;
        }
        .header-left {
            margin: 6px;
            padding-left: 10px;
            .el-col {
                color: #000;
                line-height: 28px;
            }
        }
        .header-right {
            margin: 6px;
            color: #000;
            .el-col {
                color: #000;
                line-height: 28px;
            }
        }
    }
    .main-title {
        margin-top: 20px;
        h2 {
            background: #bdd6ee;
            padding-left: 10px;
        }
        p {
            padding: 6px;
        }
    }
    .main-end {
        position: relative;
        h2 {
            background: #bdd6ee;
            padding-left: 10px;
        }
        table {
            margin-top: 15px;
        }
    }
    .end-parse {
        margin-top: 20px;
        h2 {
            background: #bdd6ee;
            padding-left: 10px;
        }
        p {
            padding: 6px;
            color: #000000;
            line-height: 27px;
            font-size: 14px;
        }
    }
    .table ul li {
        border-bottom: 1px solid #000;
    }
    .lab {
        border: 1px solid #000;
        margin-top: 40px;
        h2 {
            border: 1px solid #000;
            border-top: none;
            border-left: none;
            border-right: none;
            padding-left: 10px;
            background: #bdd6ee;
        }
        .labMain {
            line-height: 27px;
            padding-left: 10px;
            font-size: 14px;
        }
    }
    .localization {
        margin-top: 20px;
        border: 1px solid #000;
        h2 {
            background: #bdd6ee;
            border-bottom: 1px solid #000;
        }
        .localizationContent {
            line-height: 27px;
            padding: 0 10px;
            font-size: 14px;
        }
    }
    .special {
        margin-top: 20px;
        h2 {
            padding-left: 10px;
            background: #bdd6ee;
        }
        .specialMain {
            line-height: 27px;
            padding-left: 10px;
            font-size: 14px;
        }
    }
    .inheritance {
        text-align: right;
        p {
            margin-top: 10px;
            input {
                border: none;
                outline: none;
            }
        }
    }
    .table1 {
        border: 1px solid #000;
        .tr1 {
            border-top: 1px solid #000;
            border-right: 1px solid #000;
            td:last-child {
                border-right: none;
            }
            td {
                border-right: 1px solid #000;
                border-bottom: 1px solid #000;
                word-break: break-all;
            }
        }
    }
    .test {
        h2 {
            padding-left: 10px;
            background: #bdd6ee;
        }
        .table4 {
            margin-top: 15px;
            border: 1px solid #000;
            border-bottom: none;
            tr {
                th {
                    border-right: 1px solid #000;
                    border-bottom: 1px solid #000;
                }
                th:last-child {
                    border-right: none;
                }
            }
        }
    }
    .pTitle {
        margin-top: 20px;
    }
    .end {
        border: 1px solid #000;
        margin-bottom: 30px;
        .tr3 th {
            text-align: center;
            border-bottom: 1px solid #000;
            border-right: 1px solid #000;
        }
        th:last-child {
            border-right: none;
        }
        .table4 {
            border-top: 1px solid #000;
            td {
                text-align: center;
                word-break: break-all;
                border-bottom: 1px solid #000;
                border-right: 1px solid #000;
            }
            td:last-child {
                border-right: none;
            }
        }
        .left {
            text-align-last: left;
        }
    }
    .inspect {
        margin-bottom: 20px;
        p {
            line-height: 25px;
        }
        ol {
            li {
                line-height: 30px;
            }
        }
    }
    .btnNormal {
        float: right;
        button+button {
            margin-left: 10px;
        }
        .download {
            padding: 2px 25px;
            border-radius: 20px;
            margin-left: 10px;
            background-color: #4578ad;
            border-color: #4578ad;
            color: #fff;
            display: inline-block;
            margin-bottom: 0;
            font-weight: normal;
            text-align: center;
            vertical-align: middle;
            touch-action: manipulation;
            cursor: pointer;
            background-image: none;
            border: 1px solid transparent;
            white-space: nowrap;
            line-height: 1.5;
            user-select: none;
            font-size: 14px;
            transition: color 0.2s linear, background-color 0.2s linear,
            border 0.2s linear, box-shadow 0.2s linear;
            &:hover {
                background-color: #6a93bd;
                border-color: #6a93bd;
            }
        }
    }
    .centers {
        position: absolute;
        top: 50%;
        left: 0;
    }
}
</style>
<template>
    <div id="cmain" class="family-tree-mask" v-loading="loading" element-loading-text="数据加载中，请稍等......">
        <div class="cmain-content">
            <el-row v-if="!isShowerror" :span="24">
                <el-row :span="24">
                    <p class="title">分子检测报告</p>
                    <div class="btnNormal">
                        <!-- <Button type="ghost" @click="goHome">返回</Button> -->
                        <Button type="primary" @click="getreportid">生成报告</Button>
                        <Button type="primary" @click="reportdown" :disabled='disdown'>下载报告</Button>
                    </div>
                </el-row>
                <div class="header">
                    <h2>患者基本信息</h2>
                    <el-row>
                        <el-col :span="12">
                            <div class="header-left">
                                <el-row>
                                    <el-col>受检者姓名：
                                        <span v-text="dchPatient.patientname"></span>
                                    </el-col>
                                    <el-col>受检者编号：
                                        <span v-text="dchPatient.patientcode"></span>
                                    </el-col>
                                    <el-col>出生日期：
                                        <span v-text="dchPatient.birthday"></span>
                                    </el-col>
                                    <el-col>受检者性别：
                                        <span v-text="dchPatient.sex"></span>
                                    </el-col>
                                    <el-col>受检者民族：
                                        <span v-text="dchPatient.nation"></span>
                                    </el-col>
                                    <el-col>报告版本：
                                        <span></span>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="header-right">
                                <el-row>
                                    <el-col>送检单位：
                                        <span></span>
                                    </el-col>
                                    <el-col>送检医生：
                                        <span></span>
                                    </el-col>
                                    <el-col>样本编号：
                                        <span v-text="sample.samplecode"></span>
                                    </el-col>
                                    <el-col>样本类型：
                                        <span v-text="sample.sampletype"></span>
                                    </el-col>
                                    <el-col>样本接收日期：
                                        <span v-text="sample.receivedate"></span>
                                    </el-col>
                                    <el-col>报告日期：
                                        <span v-text="data.date"></span>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div class="main-end">
                    <h2>检测结果</h2>
                    <p>未检测到可以解释患者表型的致病/疑似致病变异</p>
                </div>
                <div class="end-parse">
                    <h2>结果解释</h2>
                    <div v-if="documents && documents.length>0">
                        <div :key="items" v-for="items in documents">
                            <p v-if="items.descModel && items.descModel.text">{{items.descModel.text}}</p>
                            <p v-else>暂无数据</p>
                        </div>
                    </div>
                    <p v-else>暂无数据</p>
                </div>
                <div v-for="(item,index) in documents" v-if='item.Gene_information' :key="index">
                    <div class="Br" v-if="documents && documents.length>0">
                        <h2>{{item.Gene_information.geneName}}基因突变患癌风险</h2>
                        <table cellpadding="0" cellspacing="0" width="100%" height="200" class="table4">
                            <thead>
                                <tr>
                                    <th>相关癌症</th>
                                    <th>对应风险的发生年龄</th>
                                    <th>{{item.Gene_information.geneName}}突变携带者患癌风险</th>
                                    <th>普通人群患癌风险</th>
                                </tr>
                            </thead>
                            <tbody v-for='(items,indexs) in item.Gene_information.geneOverview.geneRiskTableList' :key="indexs">
                                <tr v-for='(nowitem,nowindex) in items.cancerRiskList' :key="nowindex">
                                    <th :rowspan="items.cancerRiskList.length" v-if="nowindex == 0">{{items.cancerType}}</th>
                                    <th>{{nowitem.ageRange}}</th>
                                    <th>{{nowitem.cancerRisk}}</th>
                                    <th>{{nowitem.personRisk}}</th>
                                </tr>
                            </tbody>
                        </table>
                        <p>注：以上数据为已知文献中所报道的数据，仅供参考。</p>
                    </div>
                    <div class="Nba">
                        <h2>美国国立综合癌症网络指南（NCCN）摘要 - {{item.Gene_information.geneName}}突变携带者风险管理措施</h2>
                        <table cellpadding="0" cellspacing="0" width="100%" height="200" class="table4">
                            <thead>
                                <tr>
                                    <th>器官</th>
                                    <th>应采取措施的年龄（岁）</th>
                                    <th>频率</th>
                                    <th>检查项目与管理措施</th>
                                </tr>
                            </thead>
                            <tbody v-for='(items,indexs) in item.Gene_information.geneOverview.riskManageTableList' :key="indexs">
                                <tr v-for='(nowitem,nowindex) in items.riskManage' :key="nowindex">
                                    <th :rowspan="items.riskManage.length" v-if="nowindex == 0">{{items.cancerType}}</th>
                                    <th>{{nowitem.startAge}}</th>
                                    <th>{{nowitem.frequency}}</th>
                                    <th>{{nowitem.checkItem}}</th>
                                </tr>
                            </tbody>
                        </table>
                        <p>注：以上数据为已知文献中所报道的数据，仅供参考。</p>
                    </div>
                    <div class="Reference">
                        <h2>参考文献</h2>
                        <div class="ReferenceContent">
                            <!-- <p>{{item.Gene_information.geneName}}</p> -->
                            <p v-for='(items,indexs) in item.Gene_information.references' :key="indexs">{{items}}</p>
                        </div>
                    </div>
                </div>
                <div class="test">
                    <h2>检测方法</h2>
                    <table cellpadding="0" cellspacing="0" width="100%" height="210" class="table4">
                        <tbody>
                            <tr>
                                <th>检测仪器</th>
                                <th>Illumina Hiseq-X10</th>
                            </tr>
                            <tr>
                                <th>提取试剂盒</th>
                                <th>Agilent SureSelectXT Human All Exon V6 kit</th>
                            </tr>
                            <tr>
                                <th>读长</th>
                                <th>2*150bp</th>
                            </tr>
                            <tr>
                                <th>碱基质量（Q30）</th>
                                <th>＞85%</th>
                            </tr>
                            <tr>
                                <th>测序中位深度</th>
                                <th>＞100×</th>
                            </tr>
                            <tr>
                                <th>相关软件使用</th>
                                <th>GATK4，Sapientia，SIFT，PolyPhen，GERP，Grantham</th>
                            </tr>
                            <tr>
                                <th>参考序列</th>
                                <th>GRCh37/hg19</th>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="special">
                    <h2>特别说明</h2>
                    <div class="specialMain">
                        <p>1、本报告结论均基于本样本在实验室的检测数据，仅对该样本所检测的所有基因及位点负责。</p>
                        <p>2、突变位点致病性的判定标准参考：美国医学遗传学与基因组学学会（ACMG）和分子病理学学会（AMP）的一致联合建议：
                            <a :href='pdfurl' download target="_blank">《序列变异解读标准和指南》</a>
                        </p>
                        <p>3、由于个体的差异以及当前医学检测技术水平的限制等因素，即使在检测人员已经履行工作职责和操作规程的前提下，检测结果仍有可能出现假阳性或者假阴性。如需进一步的诊断和治疗，请咨询临床医生。</p>
                        <p>4、请妥善保管该报告，由于个人原因造成信息外泄，本实验室概不负责。如有疑义，请联系我们。</p>
                        <p>5、常规全外显子数据分析不包含染色体结构变异相关突变。</p>
                    </div>
                </div>
                <div class=" inheritance">
                    <p>
                        遗传咨询师：<input type="text"> 报告审核： <input type="text"> 报告日期：
                        <input type="text">
                    </p>
                </div>
                <p class="pTitle">检测到的以下基因变异，无法全部或者部分解释受检者的临床症状，供临床医生参考：</p>
                <div class="end" v-if="documentlist">
                    <table  cellpadding="0" cellspacing="0" width="100%" height="70" border="0" class="table4" style="table-layout：fixed">
                        <thead>
                            <tr class="tr3">
                                <th height="30">基因</th>
                                <th height="30">染色体位置</th>
                                <th height="30">基因突变信息</th>
                                <th height="30">合子类型</th>
                                <th height="30">遗传模式</th>
                                <th height="30">可能临床症状</th>
                            </tr>
                        </thead>
                        <tbody :key="item" v-for="item in documentlist">
                            <tr class="tr3"  >
                                <td height="30" width="70" v-text="item.Ref_Gene"></td>
                                <td height="30" width="70" v-text="item.chrAndRef_Pos"></td>
                                <td height="30" width="120" v-text="item.NAChange"></td>
                                <td height="30" width="80" v-text="item.genoType"></td>
                                <td height="30" width="80">
                                    <div v-if="item.descModel">
                                        <p v-for="it in item.descModel.heredity" :key="it">{{it}}</p>
                                    </div>
                                </td>
                                <td height="30" width="100" v-text="item.Description"></td>
                            </tr>
                            <tr>
                                <td  height="30" colspan="6" v-if="item.descModel" v-text="item.descModel.text"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="end" v-else>
                    <table cellpadding="0" cellspacing="0" width="100%" height="70" border="0" class="table4" style="table-layout：fixed">
                        <thead>
                            <tr class="tr3">
                                <th height="30">基因</th>
                                <th height="30">染色体位置</th>
                                <th height="30">基因突变信息</th>
                                <th height="30">合子类型</th>
                                <th height="30">遗传模式</th>
                                <th height="30">可能临床症状</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td colspan="6"  height="30">暂无数据</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="inspect">
                    <p>基于送检的临床表型，选用以下人类表型标准术语（Human Phenotype Ontology, HPO）和／或在线孟德尔遗传（Online Mendelian Inheritance in Man, OMIM）术语以筛选合适候选致病基因。本报告依据以下表型：</p>
                    <ol>
                        <li v-for="(item, index) in dchPatient.chpoModelList" :key="index">
                            <span v-text="item.chpo_num"></span>：
                            <span v-text="item.chpo_cn"></span>
                        </li>
                    </ol>
                </div>
            </el-row>
            <error v-if="isShowerror" @errorCallback="getReportData"></error>
        </div>
    </div>
</template>
<script>
import {pdfUrl} from '@/common/js/Base.js'
import { setCookie, getCookie, delCookie } from "@/common/js/cookie.js";
import { data } from "api/index.js";
import error from '@/components/404.vue';
export default {
    data() {
        return {
            pdfurl:pdfUrl.pdfurl,
            loading:false,
            isShowerror: false,
            dchPatient: {},
            documentlist: {},
            sample: {},
            data: {},
            reportflag: null,
            disdown: true,
            hposhow: false,
            documents: [],
            mainEnd: "未检测到可以解释患者表型的致病/疑似致病变异",
            endParse:
            "对患者的测序数据分析没有发现可以解释表型的致病或疑似致病变异。需注意的是高通量测序数据的解读依赖于临床提供的病史信息、现有的数据库信息和已发表的文献资料，具有一定的适用范围（详见“检测方法的局限性声明”部分）。因此，本次检测结果并不能完全排除遗传因素。",
            literature1:
            "[1] Birkenhager, R., Otto, E., Schurmann, M. J., Vollmer, M., Ruf, E.-M., Maier-Lutz, I., Beekmann, F., Fekete, A., Omran, H., Feldmann, D., Milford, D. V., Jeck, N., Konrad, M., Landau, D., Knoers, N. V. A. M., Antignac, C., Sudbrak, R., Kispert, A., Hildebrandt, F. Mutation of BSND causes Bartter syndrome with sensorineural deafness and kidney failure.",
            literature2:
            "[2] Brennan, T. M. H., Landau, D., Shalev, H., Lamb, F., Schutte, B. C., Walder, R. Y., Mark, A. L., Carmi, R., Sheffield, V. C. Linkage of infantile Bartter syndrome with sensorineural deafness to chromosome 1p. Am. J. Hum. Genet. 62: 355-361, 1998.",
            literature3:
            "[3] Estevez, R., Boettger, T., Stein, V., Birkenhager, R., Otto, E., Hildebrandt, F., Jentsch, T. J. Barttin is a Cl- channel beta-subunit crucial for renal Cl- reabsorption and inner ear K+ secretion. Nature 414: 558-561, 2001.",
            literature4:
            "[4] Miyamura, N., Matsumoto, K., Taguchi, T., Tokunaga, H., Nishikawa, T., Nishida, K., Toyonaga, T., Sakakida, M., Araki, E. Atypical Bartter syndrome with sensorineural deafness with G47R mutation of the beta-subunit for ClC-Ka and ClC-Kb chloride channels, barttin. J. Clin. Endocr. Metab. 88: 781-786, 2003.",
            literature5:
            "[5] Banka, S., Veeramachaneni, R., Reardon, W., Howard, E., Bunstone, S., Ragge, N., Parker, M. J., Crow, Y. J., Kerr, B., Kingston, H., Metcalfe, K., Chandler, K., and 40 others. How genetically heterogeneous is Kabuki syndrome? MLL2 testing in 116 patients, review and analyses of mutation and phenotypic spectrum. Europ. J. Hum. Genet. 20: 381-388, 2012.",
            literature6:
            "[6] Daniel, J. A., Santos, M. A., Wang, Z., Zang, C., Schwab, K. R., Jankovic, M., Filsuf, D., Chen, H.-T., Gazumyan, A., Yamane, A., Cho, Y.-W., Sun, H.-W., Ge, K., Peng, W., Nussenzweig, M. C., Casellas, R., Dressler, G. R., Zhao, K., Nussenzweig, A. PTIP promotes chromatin changes critical for immunoglobulin class switch recombination. Science 329: 917-923, 2010.",
            literature7:
            "[7] Hannibal, M. C., Buckingham, K. J., Ng, S. B., Ming, J. E., Beck, A. E., McMillin, M. J., Gildersleeve, H. I., Bigham, A. W., Tabor, H. K., Mefford, H. C., Cook, J., Yoshiura, K., and 24 others. Spectrum of MLL2 (ALR) mutations in 110 cases of Kabuki syndrome. Am. J. Med. Genet. 155A: 1511-1516, 2011.",
            inspectTttle: " HP:0001581 :",
            inspectContent: "复发性皮肤感染"
        };
    },
    methods: {
        getreportid() {
            if (this.reportflag == 0) {
                this.getReport()
            } else if (this.reportflag == 1) {
                var _this = this;
                this.$Modal.confirm({
                    title: '确认提示',
                    content: '<p>报告已存在，是否重新生成报告?</p>',
                    onOk: () => {
                        this.getReport();
                    },
                    onCancel: () => {
                        this.reportid = res.data;
                    }
                });
            }
        },
        reportdown() {
            let obj = {
                reportid: this.reportid
            };
            data.downloadMyReport(obj).then(res => {
                if (res.returnCode == 0) {
                    this.downurl = res.data;
                    this.downloadFile(this.downurl);
                } else {
                    this.$Message.error(res.msg)
                }
            });
        },
        downloadFile(url) {
            try {
                var elemIF = document.createElement("iframe");

                elemIF.src = url;

                elemIF.style.display = "none";

                document.body.appendChild(elemIF);

                // 防止下载两次

                setTimeout(function() {
                    document.body.removeChild(elemIF);
                }, 1000);
            } catch (e) {
                console.log(e);
            }
        },
        goHome() {
            this.$router.go(-1);
        },
        editReport() {
            this.buttonShow = false;
            this.inputShow = false;
        },
        CancelEdit() {
            this.buttonShow = true;
            this.inputShow = true;
        },
        generationflag() {
            let obj = {
                patientid: M.url().patientid,
            }
            data.generationflag(obj).then((res) => {
                if (res.returnCode == 0 || res.returnCode == 1) {
                    this.reportflag = res.returnCode;
                    if (res.returnCode == 1) {
                        this.disdown = false;
                        this.reportid = res.data;
                    }
                } else {
                    this.$Message.error(res.msg)
                }
            })
        },
        getReport() {
            let obj = {
                productid: 1,
                patientid: M.url().patientid,
                type: "阴性",
                userid: getCookie("userid")
            };
            data.getreportbyword(obj).then(res => {
                console.log(res);
                if (res.returnCode == 0) {
                    this.reportid = res.data;
                    this.disdown = false;
                    this.$Message.success(res.msg);
                } else {
                    this.$Message.error(res.msg);
                }
            });
        },
        getReportData() {
            let obj = {
                patientid: M.url().patientid,
                productid: 1,
                type: "阴性",
                userid: getCookie("userid")
            };
            this.loading = true;
            data.getReport(obj).then(res => {
                console.log(res);
                if (res.returnCode == 0) {
                    // if (res.data.documentlist != null && res.data.documentlist.length > 0) {
                    //     res.data.documentlist.forEach(function(element) {
                    //         if (element.descModel && element.descModel != null) {
                    //             for (var i = 0; i < element.descModel.checks.length; i++) {
                    //                 if (element.descModel.checks[i] == "HPO词条") {
                    //                     _this.hposhow = true;
                    //                 }
                    //             }
                    //             // if ("HPO词条" in element.descModel.checks) {
                    //             //     _this.hposhow = true;
                    //             // }
                    //         }
                    //     }, this);
                    // } else if (res.data.documents != null && res.data.documents.length > 0) {
                    //     res.data.documents.forEach(function(element) {
                    //         if (element.descModel && element.descModel != null) {
                    //             if ("HPO词条" in element.descModel.checks) {
                    //                 _this.hposhow = true;
                    //             }
                    //         }
                    //     }, this);
                    // }
                    this.dchPatient = res.data.dchPatient;
                    this.documents = res.data.documents;
                    this.sample = res.data.sample;
                    this.data = res.data;
                    this.documentlist = res.data.documentlist;
                    this.generationflag();
                } else {
                    this.$Message.error(msg);
                }
                this.loading = false;
                this.isShowerror = false;
            }).catch(error => {
                console.log(error);
                this.isShowerror = true;
                this.loading = false;
            });
        }
    },
    mounted() {
        this.getReportData();
    },
    components: {
        error
    }
};
</script>


